<template>
  <el-col :sm="sm" :md="md" :lg="lg" v-bind="$attrs" >
    <div v-if="required" class="left-info required" v-text="label+'：'"/><div v-else class="left-info" v-text="label+'：'"/><div v-if="text" class="right-info right-info-text" ><el-tooltip :content="text+''" effect="dark" placement="right-end"><span v-text="text" /></el-tooltip></div>
    <div v-else class="right-info" ><slot /></div>
  </el-col>
</template>

<script>
export default {
  name: 'LayoutCol',
  props: {
    label: {
      type: String,
      default: ''
    },
    // eslint-disable-next-line vue/require-default-prop,vue/require-prop-types
    text: {},
    sm: {
      type: Number,
      default: 12
    },
    md: {
      type: Number,
      default: 12
    },
    lg: {
      type: Number,
      default: 8
    },
    required: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style scoped>
  .left-info{
    display: inline-block;
    text-align: right;
    width: 130px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .required:before{
    content: '*';
    color: #f56c6c;
    margin-right: 4px;
  }
  .right-info{
    text-align: left;
    display: inline-block;
    padding-left: 5px;
    width: calc(100% - 130px);
  }
  .right-info-text{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
</style>
